<template>
  <div>
    <div class="collectsonglistsbox">
      <slot name="recommend"></slot>
      <div class="mysongbox" v-for="(item, index) in songlist" :key="index" @click="tolisting(item.id,false)">
        <div class="cover">
          <img
            :src="item.coverImgUrl || item.picUrl"
            alt=""
            @mousemove="show(index)"
            @mouseout="hidden()"
          />
        </div>
        <div class="info">{{ item.name }}</div>
        <div class="total" v-if="isShowTotal">{{ item.trackCount }}首</div>
        <div class="play" v-show="index == i" @mousemove="show(index)">
          <span class="icon-bofang" @mousemove="show(index)"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Repeat",
  props: ["songlist","isShow"],
  data() {
    return {
      i: -1, //控制播放按钮显示或隐藏

      // isShowTotal: false,
    };
  },
  mounted() {
    // console.log(this.songlist);
  },
  computed: {
    isShowTotal(){
      return this.isShow
    }
  },
  methods: {
    show(index) {
      this.i = index;
    },
    hidden() {
      this.i = -1;
    },
    tolisting(songListId,isRefresh){
      this.$bus.$emit("ToListing",songListId,isRefresh)
    }
  },
};
</script>

<style>
.collectsonglistsbox {
  text-align: left;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
}
.mysongbox {
  width: 15%;
  height: 270px;
  /* background: #fafafa; */
  margin: 10px 0.8% 20px;
  position: relative;
}
.mysongbox .cover {
  width: 100%;
  height: 182.4px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #eee;
}
.mysongbox .cover:hover {
  border: 1px solid #ddd;
}
.mysongbox .cover img {
  width: 100%;
  height: 100%;
}
.mysongbox .info {
  max-height: 35px;
  padding: 8px 0;
  font-size: 15px;
  letter-spacing: 0.1em;
  overflow: hidden;
  height: 200px;
}
.mysongbox .total {
  font-size: 12px;
  color: #666;
}
.mysongbox .play {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #fafafa;
  border-radius: 50%;
  right: 10px;
  top: 130px;
}
.mysongbox .play span {
  font-size: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgb(171, 241, 241);
}
</style>